<template>
  <div id="abcd">
      {{msg}}
      <ol v-show="show">
          <OlTestVue v-for="(tes,val,index) in arr" :key="index" :item="tes" class="abacd"
                     @up="countValue($event)" @resetN="count=0" testAttr="123456">
              <template v-slot:a="{testMsg}">
                  {{testMsg}}
              </template>
              <!-- {{count}}: -->
          </OlTestVue>
      </ol>
      <p/>
      <input v-model.lazy="msg">
      <div>
          {{changeMsg}}
      </div>
      <div>{{count}}</div>
      <div>
          <button @click="show=!show">
          点击显示和隐藏
          </button>
          <button @click="reverseWord">
          点击翻转
          </button>
          <br>
          <button @click="sortWord('up')">
          升序排序
          </button>
          <button @click="sortWord('down')">
          降序排序
          </button>
      </div>
    </div>
</template>
<script>
import OlTestVue from '../components/OlTest';

function doSomeThing(message){
    console.log(message);
}

export default {
  name: "Tes",
  data: function() {
    return {
      msg: "测试",
      show: true,
      arr:[
          {id:'3',text:"id为3"},
          {id:'2',text:"id为2"},
          {id:'1',text:"id为1"},
      ],
      count:0
    };
  },
  methods:{
    reverseWord(){
        // this.show = !this.show;
        doSomeThing("测试打一个log")
        console.log("这是用logger打的log")
        this.arr.reverse();
    },
    sortWord(val){
        this.arr.sort((a,b)=>{
            if(val==='down'){
                return -(a.id.charCodeAt()-b.id.charCodeAt());
            } else{
                return a.id.charCodeAt()-b.id.charCodeAt();
            }
        })
    },
    countValue:function(val){
        return this.count+=val;
    }
  },
  components:{
      OlTestVue
  },
  watch:{
      msg:function(val){
          console.log("参数msg的值改变了，目前值"+val)
      }
  },
  computed:{
      changeMsg:function(){
          return "当前msg的值："+this.msg;
      }
  }
};
</script>